import React, { Component } from 'react'
import { Table, Divider, Button } from 'antd'
import api from '../../api'
import IconDom from '../../component/IconDom'
import T from '../../lib/T'
import mapData from './month-map'
import { connect } from 'mirrorx'

class Financial extends Component {
  constructor (props) {
    super(props)
    this.state = {
      currentPage: 1,
      pageSize: 8,
      rowTotal: 10,
      month: '',
      financialList: []
    }
    this.changePage = this.changePage.bind(this)
  }
  componentDidMount () {
    this.getMonthIncome()
    this.getTotal()
    this.getMonthlySummary()
  }
  getMonthlySummary () {
    T.ajax({
      url: api.monthlySummary.path
    }).then(res => {
      if (res.code === 0) {
        let financialList = res.data.map(item => {
          if (item.month < 10) {
            item.month = '0' + item.month
          }
          item.term = item.year + '.' + item.month
          return item
        })
        this.setState({
          financialList
        })
      }
      console.log('getMonthlySummary', res.data)
    })
  }
  getMonthIncome () {
    T.ajax({
      url: api.currentMonthIncome.path
    }).then(res => {
      console.log('getMonthIncome', res)
      if (res.code === 0) {
        let { amount, month } = res.data
        this.setState({
          amount,
          month
        })
      }
    })
  }
  getTotal () {
    T.ajax({
      url: api.financialSummary.path
    }).then(res => {
      console.log('financialSummary', res)
      if (res.code === 0) {
        let total = res.data
        if (total) {
          let { totalPremium, currency, totalProfit } = total
          this.setState({
            totalPremium, currency, totalProfit
          })
        }
      }
    })
  }
  changePage (currentPage) {
    console.log('currentPage', currentPage)
    this.setState({ currentPage }, () => {

    })
  }
  render () {
    let { grantedMenus } = this.props
    let menuAuth = false
    if (grantedMenus) {
      console.log('grantedMenus', grantedMenus)
      menuAuth = T.getMenuAuth('Finance', grantedMenus)
    }
    console.log('Finance', menuAuth)
    const columns = [
      { title: 'Term (Month)', width: 150, dataIndex: 'term' },
      { title: 'Premium',
        dataIndex: 'premium',
        render: (value) => {
          return T.formatPrice(value)
        } },
      { title: 'Commission',
        dataIndex: 'commission',
        render: (value) => {
          return T.formatPrice(value)
        } },
      { title: 'Expense',
        dataIndex: 'expense',
        render: (value) => {
          return T.formatPrice(value)
        } },
      { title: 'Total Profit',
        dataIndex: 'profit',
        render: (value) => {
          return T.formatPrice(value)
        } },
      { title: 'Operate',
        dataIndex: 'operate',
        render (value, record) {
          let url = api.exportMonthlySummary.path

          return <div>
            {
              !menuAuth
                ? <Button disabled>Export</Button>
                : <div>
                  {
                    record.income !== 0 && record.premium !== 0
                      ? <a
                        target='blank'
                        className='export'
                        href={`/export${url}/${record.year}/${record.month}`}>Export</a>
                      : ''
                  }
                </div>
            }
          </div>
        } }
    ]
    let { totalPremium, currency, month, totalProfit, financialList, amount } = this.state
    return <div>
      <div className='mt20 financial'>
        <div className='financial-title'>
          <img
            src='/assets/images/financial.png' />
          <span className='fin-label'>
            {
              `The Monthly Income (${mapData[month - 1]}) :`
            }
          </span>
          <span
            className='fin-value'>
              SGD {amount}
          </span>
        </div>
        <Divider />
        {
          financialList.length === 0
            ? <div className='no-data'>
              <div className='no-data-icon'>
                <IconDom code='icon-zanwuneirong' />
              </div>
                No Data
            </div>
            : <div className='mt20'>
              <Table
                bordered
                pagination={false}
                dataSource={financialList}
                columns={columns} />
              <div className='total-counts mt10 pl10'>
                <span className='count-label'>Total Settled Premium :</span>
                <span className='count-value'>
                  {currency} {T.formatPrice(totalPremium) }
                </span>
                <span className='ml40 count-label'>Total Income :</span>
                <span className='count-value'>
                  {currency} {T.formatPrice(totalProfit)}
                </span>
              </div>
            </div>
        }

      </div>
    </div>
  }
}

export default connect(state => {
  return state.menuModel
})(Financial)
